/*
 * Copyright 2021 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package app.delish.details

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ExpandLess
import androidx.compose.material.icons.filled.ExpandMore
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.ui.tooling.preview.Preview
import app.delish.details.R
import app.delish.compose.view.RecipesStepsSelection

@Composable
fun RecipeSteps(steps: List<String>?) {
    // 仅在步骤列表非空时显示步骤区域
    if (steps?.size != 0) {
        // 记录当前选中的步骤索引（默认为0）
        val selectionIndex = remember { mutableStateOf(0) }

        // 垂直布局容器
        Column(
            modifier = Modifier.fillMaxWidth()
        ) {
            // 步骤标题
            Text(
                text = stringResource(id = R.string.method),  // "制作方法"
                style = MaterialTheme.typography.h6,           // 标题样式
                modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp),
                color = Color.White  // 白色文字
            )

            // 当前选中的步骤内容
            RecipeStepItem(summary = steps?.get(selectionIndex.value) ?: "")

            // 步骤选择器（指示器）
            RecipesStepsSelection(
                stepsCount = steps?.size ?: 0,  // 总步骤数
                modifier = Modifier.align(Alignment.CenterHorizontally)  // 水平居中
            ) { selectedIndex ->
                selectionIndex.value = selectedIndex  // 更新选中索引
            }
        }
    }
}

/**
 * 单一步骤内容卡片
 */
@Composable
fun RecipeStepItem(summary: String?) {
    // 控制文本是否完全展开的状态
    var extended by remember { mutableStateOf(false) }

    // 使用约束布局实现复杂定位
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()     // 占满宽度
            .wrapContentHeight() // 高度自适应内容
            .padding(16.dp)     // 周边间距
    ) {
        // 创建布局约束引用
        val (summaryText, expandIcon) = createRefs()

        // 步骤描述文本
        Text(
            text = summary ?: "",  // 显示传入的步骤说明
            color = Color.White,   // 白色文字
            style = MaterialTheme.typography.caption,  // 小号字体
            textAlign = TextAlign.Start,   // 左对齐
            overflow = TextOverflow.Ellipsis,  // 超长文本显示省略号
            maxLines = if (extended) Int.MAX_VALUE else 10,  // 展开时显示所有行，折叠时最多10行
            modifier = Modifier
                .padding(start = 16.dp, end = 8.dp)  // 左右内边距
                .fillMaxWidth()  // 占满宽度
                .constrainAs(summaryText) {  // 约束设置
                    linkTo(
                        start = parent.start,  // 左端贴紧父布局
                        end = expandIcon.start,  // 右端在展开图标左侧
                        top = parent.top,    // 顶部贴紧
                        bottom = parent.bottom // 底部贴紧
                    )
                }
        )

        // 展开/折叠切换按钮
        Icon(
            imageVector = if (extended)
                Icons.Filled.ExpandLess  // 已展开：向上箭头
            else
                Icons.Filled.ExpandMore,  // 已折叠：向下箭头
            contentDescription = null,  // 辅助功能描述（可为空）
            tint = Color.White,         // 白色图标
            modifier = Modifier
                .padding(end = 16.dp)   // 右侧内边距
                .clickable {            // 点击事件
                    extended = !extended  // 切换展开/折叠状态
                }
                .constrainAs(expandIcon) {  // 约束设置
                    linkTo(
                        start = summaryText.end,  // 左端在文本右侧
                        end = parent.end          // 右端贴紧父布局
                    )
                }
        )
    }
}

@Preview
@Composable
fun RecipeStepItemPreview(){
    RecipeStepItem("hello")
}